<template>
  <div>

  <ul>
  <li @click="handel1">这是第1个li</li>
  <li @click="handel2">这是第2个li</li>
  <li @click="handel3">这是第3个li</li>
</ul>
    <hr>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: '',
  data () {
    return {

    }
  },
  watch:{
    '$router.path'(newVal){
      
    }
  },
  created () {
  },
  computed: {
  },
  methods: {
    handel1(){
      this.$router.push({path:'/',query:{id:1,name:'翔哥'}}).catch(res=>{})
    },
    handel2(){},
    handel3(){
      this.$router.push({name:'third',query:{id:1,name:'翔哥'},params:{gender:'男',hobby:'吃翔'}}).catch(res=>{})
      
    },
  }
}
</script>
<style lang='less'  scoped>
ul {
  display: flex;
  li {
    margin: 20px;
    cursor: pointer;
  }
}
// .router-link-exact-active {
//   background-color: red;
// }
// .aa{
//   background-color: yellowgreen;
// }
.cc{
  background-color: pink;
}
</style>
